import React from "react"
import { Form, Input, Select, DatePicker, Button, Card, Space } from "antd"

const { Option } = Select
const { RangePicker } = DatePicker

const ErrorFilter = () => {
    const onFinish = (values: any) => {
        console.log("筛选条件:", values)
    }

    return (
        <Card>
            <Form layout="inline" onFinish={onFinish}>
                <Space size="middle" align="center">
                    <Form.Item name="type" label="错误类型">
                        <Select style={{ width: 120 }}>
                            <Option value="all">全部</Option>
                            <Option value="js">JavaScript 错误</Option>
                            <Option value="promise">Promise 拒绝</Option>
                            <Option value="resource">资源加载失败</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name="date" label="时间范围">
                        <RangePicker />
                    </Form.Item>
                    <Form.Item name="page" label="页面">
                        <Input placeholder="请输入页面 URL" />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">
                            筛选
                        </Button>
                    </Form.Item>
                </Space>
            </Form>
        </Card>
    )
}

export default ErrorFilter
